<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all>
      <el-table-column prop="date" label="date" sortable />
      <el-table-column prop="name" label="Name" sortable />
      <el-table-column prop="school" label="学校" sortable />
      <el-table-column prop="handle" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            确认
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>

          <el-switch
            v-model="scope.row.switch"
            size="large"
            @change="onSwitch(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
interface User {
  id: number
  date: string
  name: string
  school: string
  switch: boolean
  handle?: any
  hasChildren?: boolean
  children?: User[]
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    school: 'CCC',
    switch: false,
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    school: 'CCC',
    switch: false,
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    school: 'CCC',
    switch: false,
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        school: 'CCC2',
        switch: false,
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        school: 'CCC3',
        switch: false,
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    school: 'CCC3',
    switch: true,
  },
]

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const onSwitch = (val: any) => {
  console.log(val)
}
</script>

<style></style>
